<template>
  <div class="app-container">
    <!-- 条件搜索 -->
    <el-form
      ref="searchFormRef"
      :model="queryData"
      :inline="true"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="油企名称" prop="enterpriseId">
            <el-select
              v-model="queryData.enterpriseId"
              placeholder="请选择油企"
              size="small"
              filterable
              clearable
              style="width: 190px"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :label="item.enterpriseName"
                :value="item.enterpriseId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业务人员" prop="salesman">
            <el-input
              v-model="queryData.salesman"
              size="small"
              placeholder="请输入业务人员"
              clearable
              style="width: 190px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-refresh"
          plain
          @click="resetQuery"
        >
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" icon="el-icon-plus" @click="handleAdd">
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          size="mini"
          plain
          icon="el-icon-delete"
          :disabled="selectionList.length < 1"
          @click="handleDelAll"
          >批量删除</el-button
        >
      </el-col>
    </el-row>
    <!--表格 -->
    <el-table
      stripe
      v-loading="loading"
      ref="multipleTable"
      :data="memberList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="left"
        width="
      80"
      />
      <el-table-column
        prop="enterpriseName"
        label="油企名称"
        show-overflow-tooltip
        :formatter="enterpriseForMatter"
      >
      </el-table-column>
      <el-table-column
        prop="salesman"
        label="业务人员"
        show-overflow-tooltip
      ></el-table-column>
      <!-- <el-table-column prop="leader" label="负责人" show-overflow-tooltip>
      </el-table-column> -->
      <el-table-column
        prop="createdDate"
        label="创建时间"
        show-overflow-tooltip
        sortable
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="操作时间"
        show-overflow-tooltip
        sortable
      ></el-table-column>
      <el-table-column
        prop=""
        label="操作"
        show-overflow-tooltip
        fixed="right"
        width="100"
      >
        <template v-slot="{ row }">
          <el-button type="text" @click="handleView(row)">查看</el-button>
          <el-button type="text" @click="handleEdit(row)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <memberForm ref="memberForm" :parm="params" @getData="getData" />
  </div>
</template>
<script>
import {
  memberList,
  deleteMember,
  getLevelUserSix,
} from "@/api/member-management";
import { cloneDeep } from "lodash";
import { getEnterpriseList } from "@/api/dept";
import memberForm from "./member-form.vue";
export default {
  components: { memberForm },
  data() {
    return {
      queryData: {},
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      selectionList: [],
      dateRangeCreatedDate: [],
      enterpriseList: [],
      memberList: [],
      params: {},
    };
  },
  methods: {
    // 新增
    async handleAdd() {
      let res = await getLevelUserSix();
      this.params = {
        drawerShow: true,
        drawerType: "new",
        memberData: {},
        settingData: {
          enterpriseList: this.enterpriseList,
          memberList: res.data || [],
        },
      };
    },
    // 查看
    async handleView(row) {
      let rowData = cloneDeep(row);
      if (rowData.enterpriseIds) {
        rowData.enterpriseIds = rowData.enterpriseIds.split(",");
        rowData.enterpriseIds = rowData.enterpriseIds.map((item) => {
          return parseInt(item);
        });
      }
      let res = await getLevelUserSix();
      this.params = {
        drawerShow: true,
        drawerType: "view",
        memberData: rowData,
        settingData: {
          enterpriseList: this.enterpriseList,
          memberList: res.data || [],
        },
      };
    },
    // 编辑
    async handleEdit(row) {
      let rowData = cloneDeep(row);
      if (rowData.enterpriseIds) {
        rowData.enterpriseIds = rowData.enterpriseIds.split(",");
        rowData.enterpriseIds = rowData.enterpriseIds.map((item) => {
          return parseInt(item);
        });
      }
      let res = await getLevelUserSix();
      this.params = {
        drawerShow: true,
        drawerType: "edit",
        memberData: rowData,
        settingData: {
          enterpriseList: this.enterpriseList,
          memberList: res.data || [],
        },
      };
    },
    // 批量删除
    handleDelAll() {
      console.log(this.selectionList);
      this.$confirm(`确认删除勾选的成员吗？`).then(() => {
        let ids = this.selectionList.map((item) => item.id);
        deleteMember(ids).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.selectionList = [];
            this.getData();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      this.addDateRange(this.queryData, this.dateRangeCreatedDate);
      let queryData = this.getQueryData(this.queryData);
      queryData = Object.assign(
        {
          pageNum: this.page,
          pageSize: this.pageSize,
        },
        queryData
      );
      memberList(queryData).then((res) => {
        if (res && res.code === 200) {
          this.memberList = res.rows;
          this.total = res.total;
        } else {
          this.memberList = [];
          this.total = 0;
        }
      });
      this.loading = false;
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    handleQuery() {
      this.getData();
    },
    resetQuery() {
      this.$refs["searchFormRef"].resetFields();
      this.dateRangeCreatedDate = [];
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    handleSelectionChange(selection) {
      this.selectionList = selection;
    },
    // 查询油企
    getEnterpriseListQuery() {
      getEnterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    enterpriseForMatter(row) {
      let str = "";
      if (row.enterpriseList) {
        row.enterpriseList.forEach((item) => {
          str += `${item.enterpriseName};`;
        });
      }
      return str.slice(0, -1);
    },
  },
  created() {
    this.getData();
    if (this.$store.state.user.userLevel === null) {
      this.getEnterpriseListQuery();
    }
  },
};
</script>
<style scoped></style>
